<template>
  <el-container>
    <el-header
      ><h1>前端题库网</h1>
      <span v-show="isSignin">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{ userinfo }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="centres" class="layout"
              >个人中心</el-dropdown-item
            >
            <el-dropdown-item command="collect" class="layout"
              >收藏夹</el-dropdown-item
            >
            <el-dropdown-item command="logout" class="layout"
              >退出</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </span>
      <span v-show="isSignin === false">
        您未登录，请
        <el-button size="mini" class="btn" @click="signin">登录</el-button>
        或者<el-button size="mini" class="btn" @click="signup">注册</el-button>
      </span>
    </el-header>
    <el-main>
      <div class="mainbox">
        <el-row
          ><img src="../assets/bgc.jpeg" class="mainboximg" alt=""
        /></el-row>
        <el-row>
          <el-button class="gobtn" type="success" @click="gotoAnswer"
            >开始答题之旅!</el-button
          ></el-row
        >
      </div>
    </el-main>
    <el-footer> xxx科技©2021 All rights reserved admin@xxxxxxxx.com </el-footer>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>您还未登录，不能做题</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="sureTosignin">去登陆</el-button>
      </span>
    </el-dialog>
  </el-container>
  <!--  -->
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  computed:{
    userinfo(){
      return this.$store.state.user.username
    },
    isSignin(){
      return this.$store.state.user.token?true:false
    }
  },
  watch:{
isSignin(val){
  console.log(val);
}
  },
  methods: {
    signin() {
      this.$router.push("/signin");
    },
    signup() {
      this.$router.push("/signup");
    },
    handleCommand(command) {
      if (command === "logout") {
        this.logout();
      }
      if (command === "collect") {
        this.$router.push("/collect");
      }
       if (command === "centres") {
        this.$router.push("/centres");
      }
    },
    logout() {
      this.$store.commit("user/REMOVE_USER_MESSAGE")
      this.$message.info("已经退出登录");
    },
    gotoAnswer() {
      if (this.isSignin === false) {
        this.dialogVisible = true;
        return;
      }
      this.$router.push("/answer");
    },
    sureTosignin() {
      this.dialogVisible = false;
      this.signin();
    },
  },
};
</script>

<style scoped>
.el-container {
  width: 100vw;
  height: 100vh;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header h1 {
  margin-left: 20%;
  float: left;
  line-height: 50%;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  display: flex;
  align-items: center;
}

.mainbox {
  margin: 0 auto;
  width: 50%;
  height: 80%;
  text-align: center;
}
.mainboximg {
  border-radius: 10%;
  height: 80%;
  width: 80%;
}
.el-dropdown-link {
  cursor: pointer;
  color: black;
}
.layout:hover {
  color: black;
  background-color: none;
}

.btn:hover {
  background: none;
  color: white;
}
.btn:focus {
  color: white;
  background: none;
}
.gobtn {
  font-size: 100%;
  border: 1px black solid;
  width: 50%;
  height: 25%;
}
</style>